<template >
  <div class="box">
    <returnBefore></returnBefore>
    <h3 class="h3" @click="clickHandler">
      这是第一章昂发我会发我觉得垃圾大陆军和大卫结合的安徽方才恢复大会哈的后代回答
    </h3>

    <div class="shadow" v-show="this.isshow">
      <div v-if="size">
        <van-slider v-model="value" @change="onChange" />
        <div class="bot">
          <button class="btn1" @click="sizeHandler">字号大小</button>
          <button class="btn2" @click="commentHandler">评论</button>
        </div>
      </div>
      <div v-else>
        <van-form @submit="onSubmit">
          <van-field
            v-model="comment"
            name="comment"
            label="comment"
            placeholder="输入评论"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
      <!-- <van-stepper v-model="value" input-width="40px" button-size="32px" /> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  //数据源
  data() {
    return {
      value: 50,
      isshow: false,
      sizeChange: false,
      size: true,
      comment: "",
    };
  },
  created() {},
  
  methods: {
    //点击事件方法
    clickHandler(e) {
      e.stopPropagation();
      this.isshow = !this.isshow;
    },
    //获取内容标签 改变样式大小
    onChange(value) {
      let h = document.querySelector(".h3");
      if (this.sizeChange) {
        h.style.fontSize = value + "px";
      } else {
        return;
      }
    },
    //改变设置弹出样式
    sizeHandler(e) {
      e.stopPropagation();
      if (this.sizeChange === false) {
        Toast("调整字号状态启动");
        this.sizeChange = true;
      } else {
        Toast("关闭调整字号状态");
        this.sizeChange = false;
      }
    },
    //评论设置功能改变
    commentHandler(e) {
      e.stopPropagation();
      this.size = !this.size;
    },
    //评论功能实现
    onSubmit(values) {
      this.size = !this.size;
      //操作评论数据进入vuex
      const today = new Date();
      const month = today.getMonth() + 1; // 月份从 0 开始计数，所以要加 1
      const day = today.getDate();
      const date = `${month}.${day}`
      const comment = { comment: `${values.comment}`, date: date};
      this.$store.dispatch("addCommentToShelf", comment);
    },
  },
};
</script>

<style lang="scss" src="./style.scss" scoped></style>